<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.min.js">	
</script>
</head>
<body>
	<div id="app" class="container">
		<div class="row">
			<div class="col-xs-12">
				<img src="../images/mobileImage/banner.png" class="img-responsive" /> <br />
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-6" v-for="item in items">
				<a v-bind:href="item.detailUrl"> <img v-bind:src="item.image" /></br>
					<span>{{item.title}}</span></br> <span>{{item.price}}</span></br>
				</a>


			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	//必须放在</html>后面
	var vue = new Vue({
		el : "#app",
		mounted : function() {
			console.log("网页加载完成");
			var url="/api/getIndexItem.html";
			axios.get(url)
			.then(
					function(response)
					{
				     console.log(response);	     
				     
				     var result=response.data
						//服务器返回的结果有status,msg,data
						var items=result.data;
						//js中可以随时给对象加一个属性
						for(var i=0;i<items.length;i++)
							{
							var item=items[i];
							item.detailUrl="detail.html?itemId="+item.id;
							}
						this.vue.items=items;
			        }
			)
			.catch(
					function(err)
					{
						console.log(err)
					}
			);

		},
		data : {
			items : [ 
			          {
				title : "手机",
				price : 3000
			}, 
			{
				title : "电脑",
				price : 3000
			} 
			]
		}

	});
</script>
